import { Popover } from "shared/components";
import QuestionIcon from "@/assets/icons/question.svg?jsx";

export function PromptPopover() {
  return (
    <Popover
      trigger={
        <button className="ml-4 text-white">
          <QuestionIcon height={16} width={16} />
        </button>
      }
    >
      <div className="text-sm text-zinc-800 md:max-w-[300px]">
        <p>
          说明：展示内容由AI生成，仅供参考，使用前请注意查证。使用提示词为：
        </p>
        <div className="mt-0.5">
          你是一名数据处理工程师，请将上述文本按照事件进行拆分。请注意以下时间标志：**“是年”、“是月”、“当月”、“同月”、“同日”、“年初”、“中旬”、“春”、“夏”、“秋”、“冬”、“是年前后”、“上旬”、“中旬”、“下旬”，以及形如“x月xx日（xx月xx日）”的时间点**。这些标志后的文本皆作为事件解析输出。人物的出生或死亡也应当作为事件处理。
          <br />
          每个事件需包含以下信息：
          <p className="pl-2">
            - **event_time**：年份为 &lt;year&gt;
            根据上下文补充完整时间，格式为“xxxx年xx月xx日”。
            <br />
            - **event_person**：涉及的主要人物，格式为列表。
            <br />
            - **event_place**：事件发生地点，格式为列表。
            <br />
            - **event_org**：涉及的机构或组织，格式为列表。
            <br />
            - **event_title**：简要描述事件标题， 格式为字符串。
            <br />
            - **event_content**：详细描述事件内容，格式为字符串。
            <br />-
            **event_type**：简要描述事件类型，格式为字符串，类型只能是以下之一：
          </p>
          <p className="pl-4">
            - 政治活动
            <br />
            - 经济与实业
            <br />
            - 教育与文化
            <br />
            - 外交事务
            <br />
            - 社会公益与慈善
            <br />
            - 家庭与个人生活
            <br />
            - 信件往来
            <br />
            - 思想与著述
            <br />- 其他
          </p>
          请将事件按时间正序排序，并以正确的JSON格式输出。
          <br />
        </div>
      </div>
    </Popover>
  );
}
